<template>
  <div class="menu">
    <div class="menu-container">
      <el-menu
        class="menu-default"
        :default-active="onRoutes"
        :collapse="sidebar.collapse"
        background-color="transparent"
        router
      >
        <template v-for="item in menus">
          <template v-if="item.subs">
            <el-sub-menu :index="item.index" :key="item.index">
              <template #title>
                <el-icon class="el-submenu__title">
                  <component :is="item.icon"></component>
                </el-icon>
                <span class="el-submenu__title">{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs" :key="subItem.index">
                <el-menu-item :index="subItem.index">
                  {{ subItem.title }}
                </el-menu-item>
              </template>
            </el-sub-menu>
          </template>
          <template v-else>
            <el-menu-item :index="item.index" :key="item.index">
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <template #title>{{ item.title }}</template>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>

    <!-- 折叠按钮 -->
    <div class="controller" @click="collapseChage">
      <img src="@/assets/images/ysq.png" alt="" v-if="sidebar.collapse" />
      <img src="@/assets/images/zsq.png" alt="" v-else />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { useSidebarStore } from '@/store/sidebar'
import { useMainStore } from '@/store/main'
import lodash from 'lodash'
const store = useMainStore()
const sidebar = useSidebarStore()
// 侧边栏折叠
const collapseChage = () => {
  sidebar.handleCollapse()
}

onMounted(() => {
  if (document.body.clientWidth < 1500) {
    collapseChage()
  }
})
const items = [
  {
    icon: 'House',
    index: '/index',
    title: '系统首页',
    qxzybh: '001',
  },
  {
    icon: 'Calendar',
    title: '归档管理',
    index: '/gdgl',
    qxzybh: '002',
    subs: [
      {
        index: '/ajgd',
        title: '案件归档',
        qxzybh: '002001',
      },
      {
        index: '/ajsdjc',
        title: '案件锁定解除',
        qxzybh: '002009',
      },
      {
        index: '/jzsm',
        title: '集中扫描',
        qxzybh: '002002',
      },
      {
        index: '/jcgsh',
        title: '检察官审核',
        qxzybh: '002003',
      },
      {
        index: '/dacy',
        title: '档案初验',
        qxzybh: '002004',
      },
      {
        index: '/dafy',
        title: '档案复验',
        qxzybh: '002005',
      },
      {
        index: '/dagl',
        title: '档案管理',
        qxzybh: '002006',
      },
      {
        index: '/tgsh',
        title: '退改审批',
        qxzybh: '002007',
      },
      {
        index: '/wjrwgl',
        title: '文件任务管理',
        qxzybh: '002008',
      },
    ],
  },
  {
    icon: 'Collection',
    title: '归档监督',
    index: '/gdjd',
    qxzybh: '003',
    subs: [
      {
        index: '/gdyj',
        title: '归档预警',
        qxzybh: '003001',
      },
      {
        index: '/jdtj',
        title: '监督统计',
        qxzybh: '003002',
      },
      {
        index: '/jdjl',
        title: '监督记录',
        qxzybh: '003003',
      },
      {
        index: '/jdfk',
        title: '监督反馈',
        qxzybh: '003004',
      },
    ],
  },
  {
    icon: 'Tickets',
    title: '档案利用',
    index: '/daly',
    qxzybh: '004',
    subs: [
      {
        index: '/dajy',
        title: '档案借阅',
        qxzybh: '004001',
      },
      {
        index: '/jygl',
        title: '借阅管理',
        qxzybh: '004002',
      },
      {
        index: '/jysp',
        title: '借阅审批',
        qxzybh: '004003',
      },
    ],
  },
  {
    icon: 'PieChart',
    title: '查询统计',
    index: '/cxtj',
    qxzybh: '005',
    subs: [
      {
        index: '/gdqkcx',
        title: '归档情况查询',
        qxzybh: '005003',
      },
      {
        index: '/gdzzltj',
        title: '归档制作量统计',
        qxzybh: '005004',
      },
      {
        index: '/jyqktj',
        title: '借阅情况统计',
        qxzybh: '005005',
      },
      {
        index: '/cctj',
        title: '存储统计',
        qxzybh: '005006',
      },
      // {
      //   index: '/dacx',
      //   title: '档案查询',
      //   qxzybh: '005001',
      // },
      // {
      //   index: '/datj',
      //   title: '档案统计',
      //   qxzybh: '005002',
      // },
    ],
  },
  {
    icon: 'Setting',
    title: '系统配置',
    index: '/xtpz',
    qxzybh: '006',
    subs: [
      {
        index: '/gdpz',
        title: '归档配置',
        qxzybh: '006001',
      },

      // {
      //   index: '/zzjg',
      //   title: '组织机构',
      // },
      // {
      //   index: '/gnzj',
      //   title: '功能组件',
      // },
      {
        index: '/yhqx',
        title: '用户权限',
        qxzybh: '006002',
      },
      {
        index: '/cqyjpz',
        title: '超期预警配置',
        qxzybh: '006003',
      },
      {
        index: '/sjbdcpz',
        title: '数据包导出配置',
        qxzybh: '006004',
      },
      {
        index: '/rzcx',
        title: '操作日志',
        qxzybh: '006005',
      },
      // {
      //   index: '/bydm',
      //   title: '数据字典',
      // },
    ],
  },
]

const filterMenus = (arr: any[], qxList: any[]) => {
  return lodash.cloneDeep(arr).filter((item) => {
    if (item.subs?.length) {
      item.subs = filterMenus(item.subs, qxList)
    }
    return qxList.find((qx) => qx.qxzybh === item.qxzybh)
  })
}

const menus = filterMenus(items, store.userInfo.cdqxList)

const route = useRoute()
const onRoutes = computed(() => {
  return route.path
})
</script>

<style lang="scss" scoped>
.menu {
  width: 100%;
  height: 100%;
  background: url(@/assets/images/sybj.png) bottom no-repeat,
    linear-gradient(180deg, #0093df 0%, #0057a0 100%);
  position: relative;

  .menu-container {
    width: 100%;
    height: calc(100% - 10px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .controller {
    position: absolute;
    top: 50%;
    transform: translateY(-27px);
    right: -10px;
    color: #879bba;
    font-size: 30px;
    cursor: pointer;
    color: #fff;
  }

  .el-menu {
    border-right: none;
  }
  .el-menu--collapse {
    width: 60px;
  }

  .menu-default {
    .menu-icon {
      float: left;
      margin-right: 10px;
    }

    .menu-hover-icon {
      display: none;
      float: left;
      margin: 17px 15px 0 -4px;
    }

    .el-menu-item {
      color: #c4dcf4;
      height: 44px !important;
      line-height: 44px !important;
      min-width: 180px;
      &:hover {
        background: #0091e9 !important;
      }
      &.is-active {
        font-weight: 600;
      }
    }

    .el-sub-menu {
      .el-menu-item {
        padding-left: 48px !important;
        &::before {
          content: '·';
          margin-right: 6px;
        }
      }
    }
    .el-submenu__title {
      color: #c4dcf4;
      height: 48px !important;
      line-height: 48px !important;
      display: flex;
      align-items: center;

      & > span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .el-submenu__icon-arrow {
      color: #c4dcf4;
      font-size: 14px;
      right: 10px;
    }

    .el-menu-item:focus,
    .el-menu-item:hover,
    .el-menu-item.is-active {
      color: #fff;
      background: rgba($color: #000000, $alpha: 0.3) !important;

      .menu-icon {
        display: none;
      }

      .menu-hover-icon {
        display: inline-block;
      }
    }

    .el-submenu__title:hover {
      color: #fff;

      .menu_icon {
        display: none;
      }

      .menu_hover_icon {
        display: inline-block;
      }
    }
  }
}
:deep(.el-sub-menu__icon-arrow) {
  color: #fff;
}
</style>
